<template>
  <div>
    <upload-excel
    :before-upload="beforeUpload"
    :on-success="onSuccess"
    />
  </div>
</template>

<script>
import UploadExcel from '@/components/UploadExcel'
import { getImportJsData } from '@/utils/excel'
import { importEmployee } from '@/api/employee'

export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    // 解析前
    // 这个函数必须return一个布尔值 并且只有return出去的是true的时候才会执行后续的解析操作
    // 如果在这里校验不过不会进行正式的解析操作
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1   // 文件大小小于1M
      // 如果符合就上传
      if (isLt1M) {
        return true
      }
      // 不符合就提醒用户
      this.$message({
        message: '文件大小不能超过1M',
        type: 'warning'
      })
      // 接下来的就不执行
      return false
    },
    // 解析成功后
    async onSuccess({ results, header }) {
      // 插件把一个Excel文件解析成了普通的对象数组 和一个代表表头的 字符串数组
      console.log('上传完成', results, header)

      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName'
      }
      // 二次转换
      const data = getImportJsData(results, headerRelation)
      // 调用接口
      await importEmployee(data)
    }
  }
}
</script>
